<template>
  <div class="gold-shop-wrap">
    <van-nav-bar title="我的级别" left-arrow fixed @click-left="onClickLeft" />
    <div class="level">
      <div>当前级别</div>
      <img :src="levelInfo.background" />
    </div>
    <div
	class="level_data"
	v-for="item,index in levelInfo.data_list"
	v-if=" levelInfo.data_list&&levelInfo.data_list.length>0">
      <div class="level_data_img">
        <img src="../../../images/mine/icon_shuju.png" />
        {{ item.title }}
      </div>
      <div class="level_data_text">
        <div class="tips" v-if="item.desc">{{ item.desc }}</div>
        <div v-for="items,index in item.items" :key="index">
            {{items.left_text}}{{items.right_text}}
        </div>
      </div>
    </div>
    <div class="level_title" v-for="item,index in levelInfo.extra_list" :key="index">
      <div class="level_title_btn">
        <div class="title">{{item.title}}</div>
        <div class="btn" @click="getLevel(item.button_key,item.level)">{{item.button_text}}</div>
      </div>
      <div class="level_title_text" v-if="item.content" v-html="item.content.replace(/\n/g, '<br>')">
      </div>
    </div>
  </div>
</template>
<script>
import {LEVEL_INFO,SERVICE_BUY} from '@/api/mine'
export default {
  data() {
    return {
        levelInfo:{}
    };
  },
  mounted() {
    window.scrollTo(0, 0)
    localStorage.removeItem('levelInfo')
    this.$http.get(LEVEL_INFO).then(res=>{
        this.levelInfo=res.data
    })
  },
  methods: {
    onClickLeft() {
      this.$router.back();
    },
    getLevel(key,level){
        if(key=='level_buy'){
            // 去购买
            let params={
                type:1,
                level:level
            }
            this.$http.post(SERVICE_BUY,params).then(res=>{
                this.$router.push({path:'/levelCashier'})
                res.data.expired_time = new Date().getTime() + res.data.expired_seconds * 1000;
                localStorage.setItem('cashOrder',JSON.stringify(res.data))
            })
            //
        }else if(key=='agent_apply'){
            this.getApplyAgent(level)
        }else if(key=='agent_info'){
            this.getMyAgent(level)
        }else if(key=='big_agent_apply'){
          this.getApplyAgent(level)
        }else if(key=='big_agent_info'){
          this.getMyAgent(level)
        }
    },
    // 我的代理
    getMyAgent(level){
        this.$router.push({path: '/myAgent',query:{level}})
    },
    // 申请代理
    getApplyAgent(level){
        this.$router.push({path: '/applyAgent',query:{level}})
    }
  },
};
</script>
<style lang="scss" scoped>
.gold-shop-wrap {
  min-height: calc(100vh - 46px);
  padding-top: 46px;
  padding-bottom: 1.2rem;
  background: #f2f4f5;
  box-sizing: border-box;

  ::v-deep .van-nav-bar .van-icon {
    color: #333333;
  }

  ::v-deep .van-nav-bar__arrow {
    font-size: 20px;
  }
}
.level {
  position: relative;
  width: 7.02rem;
  height: 2.9rem;
  margin: 0 auto;
  div {
    width: 1.4rem;
    height: 0.44rem;
    font-size: 0.24rem;
	font-weight: 500;
    line-height: 0.44rem;
    background: #ffffff;
    border-radius: 0px 100px 100px 0px;
    color: #333;
    padding-left: 0.18rem;
    position: absolute;
    top: 0.78rem;
  }
  img {
	display: block;
	margin: 0 auto;
    width: 100%;
	height: 100%;

  }
}
.level_data {
  width: 95%;
  margin: 0 auto;
  background: #fff;
  padding-bottom: 0.2rem;
  border-radius: 8px;
  margin-top: 0.2rem;
  .level_data_img {
    background: #fef3f3;
    border-radius: 8px 8px 0px 0px;
    // opacity: 0.06;
    padding: 0.2rem;
    font-family: PingFangSC, PingFang SC;
    font-weight: 600;
    font-size: 0.28rem;
    // line-height: 0.4rem;
    // text-align: left;
    color: #333333;
    font-style: normal;
    img {
      width: 0.32rem;
      vertical-align: middle;
    }
  }
  .level_data_text {
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    font-size: 0.24rem;
    color: #666666;
    line-height: 0.44rem;
    // text-align: left;
    font-style: normal;
    padding-left:0.2rem;
    margin-top: 0.2rem;
    .tips{
      margin-bottom: 0.12rem;
      color: #F32A23;
    }
  }
}
.level_title {
  width: 95%;
  margin: 0 auto;
  background: #fff;
  // padding-bottom: 0.2rem;
  border-radius: 8px;
  margin-top: 0.2rem;
  .level_title_btn {
    display: flex;
    justify-content: space-between;
    padding: 0.2rem;
    .title {
      font-family: PingFangSC, PingFang SC;
      font-weight: 600;
      font-size: 0.32rem;
      color: #333333;
      line-height: 0.44rem;
      text-align: left;
      font-style: normal;
    }
    .btn {
      padding: 0.1rem 0.3rem;
      background: linear-gradient(135deg, #ff5851 0%, #e9011b 100%);
      border-radius: 0.28rem;
      font-family: PingFangSC, PingFang SC;
      font-weight: 500;
      font-size: 0.24rem;
      color: #ffffff;
      line-height: 0.34rem;
      //   text-align: left;
      font-style: normal;
    }
  }
  .level_title_text {
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    font-size: 0.24rem;
    color: #666666;
    line-height: 0.44rem;
    // text-align: left;
    font-style: normal;
    margin-left: 0.2rem;
    padding-bottom: 0.2rem;
  }
}
</style>
